<template>
	<view class="container">
		<!-- 顶部背景与内容 -->
		<view class="header">
			<image :src="$xyfun.image('/static/tennis-background.png')" class="background-image" />
			<!-- <view class="header-content">
				<text class="title">自助网球训练</text>
				<text class="subtitle">超燃体验</text>
				<text class="description">预约挑战 · 释放自我</text>
				<image :src="$xyfun.image('/static/tennis-ball.png')" class="tennis-ball" />
			</view> -->
		</view>

		<!-- 场馆信息 -->
		<view class="venue-info">
			<!-- 左侧：当前场馆和切换 -->
			<view class="venue-left">
				<!-- 当前场馆和切换按钮在一行 -->
				<view class="venue-row">
					<view class="switch-wrapper" @tap="$xyfun.to('/pages/store/select')">
						<text class="label">当前场馆：</text>
						<text class="switch-text">切换</text>
						<image :src="$xyfun.image('/static/arrow-right.png')" class="arrow-icon" />
					</view>
				</view>
				<!-- 广东乐训旗舰店单独一行 -->
				<text class="venue-name" @tap="$xyfun.to('/pages/store/select')">{{storeInfo.name}}</text>
			</view>

			<!-- 中间分隔线 -->
			<view class="divider"></view>

			<!-- 右侧：营业时间和图标 -->
			<view class="venue-right">
				<text class="business-hours">营业时间：{{storeInfo.businesshours}}</text>
				<view class="contact-icons">
					<image :src="$xyfun.image('/static/phone.png')" @tap="callPhone"></image>
					<image :src="$xyfun.image('/static/weixin.png')" @tap="copyWeChatNumber"></image>
					<image :src="$xyfun.image('/static/nav.png')" @tap="openLocation"></image>
				</view>
			</view>
		</view>

		<!-- 功能按钮和大图 -->
		<view class="features">
			<view class="feature-item" @tap="$xyfun.to(`/pages/store/venue?venue_id=${this.venueId}`)">
				<image :src="$xyfun.image('/static/book.png')" class="feature-icon" />
				<text class="feature-text">预约</text>
				<text class="feature-pinyin">Yuè Yù</text>
			</view>

			<!-- 左侧按钮：开始 -->
			<view class="feature-item">
				<text class="feature-text">开始</text>
				<text class="feature-pinyin">Kāi Shǐ</text>
			</view>

			<!-- 中间大图 -->
			<image @tap="start" :src="$xyfun.image('/static/center-image.png')" class="center-image" />

			<!-- 右侧按钮：训练 -->
			<view class="feature-item">
				<text class="feature-text">训练</text>
				<text class="feature-pinyin">Xùn Liàn</text>
			</view>

			<view class="feature-item" @click="goToShop">
				<image :src="$xyfun.image('/static/book.png')" class="feature-icon" />
				<text class="feature-text">加盟</text>
				<text class="feature-pinyin">Jiā Méng</text>
			</view>
		</view>
		<!-- Registration Section -->
		<view class="register-section">
			<view class="left" @tap="toLogin()">
				<!-- Avatar Image with Prefix -->
				<image :src="user.isLogin ? isLoginAvatar : $xyfun.image('/static/profile_image.png')"
					class="profile-image"></image>
				<view class="register-info">
					<text class="main-info">{{ user.isLogin ? user.info.nickname : '登录/注册' }}</text>
					<text class="sub-info">欢迎使用乐乐网球训练系统</text>
				</view>
			</view>
			<!-- <view>
				<image :src="$xyfun.image('/static/login_button.png')" class="register-button" @click="scanCode">
				</image>
			</view> -->
			<view @click="opendoor">
				<image :src="$xyfun.image('/static/login_button.png')" class="register-button">
				</image>
				<view>
					<!-- <text class="main-info">{{ user.isLogin ? user.info.nickname : '登录/注册' }}</text> -->
					<text class="sub-info">一键开门</text>
				</view>
			</view>
		</view>

		<!-- Tools Section -->
		<view class="tools-section">
			<view class="tool-item" @tap="navigateToRechargeList">
				<image :src="$xyfun.image('/static/free_borrow.png')" class="tool-icon"></image>
				<view class="tool-text">
					<text class="tool-title">优惠充值</text>
					<text class="tool-subtitle">充值享优惠</text>
				</view>
			</view>
			<view class="tool-item">
				<view class="tool-text" @tap="navigateToOrderList">
					<text class="tool-title">我的订单</text>
					<text class="tool-subtitle">查看您的订单详情</text>
				</view>
				<image :src="$xyfun.image('/static/my_orders.png')" class="tool-icon"></image>
			</view>
		</view>
		<!-- Ranking Section -->
		<view class="ranking-section">
			<view class="ranking-header">
				<view class="title-section">
					<view class="color-marker"></view>
					<text class="title">排行榜</text>
				</view>
				<view class="tab-switch">
					<button class="tab-button" :class="{active: currentTab === '当前门店'}"
						@tap="switchTab('当前门店')">当前门店</button>
					<button class="tab-button" :class="{active: currentTab === '全省门店'}"
						@tap="switchTab('全省门店')">全省门店</button>
				</view>
			</view>

			<view class="ranking-list">
				<view class="rank-item" v-for="(item, index) in rankingList" :key="index">
					<!-- Rank number: 图片替代 -->
					<view class="rank-number">
						<!-- <image v-if="index < 3" :src="getRankImage(index)" class="rank-icon"></image> -->
						<text :style="item.color" v-if="index < 3">NO.{{ item.rank }}</text>
						<text v-else>0{{ item.rank }}</text>
					</view>
					<view class="player-info">
						<image :src="$xyfun.image('/static/player_icon.png')" class="player-icon"></image>
						<text class="player-name">{{ item.name }}</text>
					</view>
					<view class="player-score-section">
						<image :src="$xyfun.image('/static/score_icon.png')" class="score-icon"></image>
						<text class="player-score">{{ item.score }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		mapState
	} from 'vuex';
	import xyTabbar from '@/components/xy-tabbar';
	export default {
		components: {
			xyTabbar,
		},
		data() {
			return {
				user: {
					isLogin: false, // 是否登录
					info: {
						avatar: '', // 用户头像
						nickname: '', // 用户昵称
					},
				},
				members: [],
				currentTab: '当前门店',
				rankingList: [

				],
				css: {},
				lat: 0,
				lng: 0,
				isLoading: true,
				storeInfo: {},
				rechargeList: [],
				noticeList: [],
				venueId: null, // 用来存储 venue_id
				isLoginAvatar: ""
			};
		},
		computed: {
			...mapState(['common'])
		},
		onPullDownRefresh() {
			this.loadData();
		},
		onShareAppMessage() {
			var shareobj = {
				title: this.storeInfo.name,
				path: '/pages/index',
				imageUrl: this.storeInfo.images[0]
			}
			return shareobj;
		},
		onShow() {
			this.$xyfun.setNavBg();
			this.css = this.$xyfun.css();
			this.$xyfun.loc().then((res) => {
				this.lat = res.latitude;
				this.lng = res.longitude;
				this.loadData();
			}, () => {
				this.loadData();
			})
			this.loadMembers();
			// console.log(uni.getStorageSync('xyvenue:user').avatar)
			this.isLoginAvatar = uni.getStorageSync('xyvenue:user').avatar
			this.checkLoginStatus();
		},
		onLoad() {
			// 在组件实例创建后立即检查登录状态
			this.checkLoginStatus();
		},
		methods: {
			opendoor() {
				// 检查用户是否已登录
				if (!this.user.isLogin) {
					// 未登录，提示用户
					uni.showToast({
						title: '未登录，请先登录',
						icon: 'none'
					});
					// 可根据需求跳转到登录页面
					// uni.navigateTo({
					// 	url: '/pages/login/login' // 假设登录页面路径是这样的
					// });
				} else {
					// 已登录，向后端发送开门请求
					this.checkUserOrder();
				}
			},
			// 检查用户订单
			checkUserOrder() {
				this.$xyfun.storeId().then((store_id) => {
					const user = uni.getStorageSync('xyvenue:user');
					const userId = user.id;
					// 发起请求，检查用户是否有订单
					this.$api.post({
						url: '/member/checkOrder', // 假设的接口路径
						loadingTip: '检查订单中...',
						data: {
							user_id: userId ,// 用户id
							store_id: store_id, // 商店 ID
						},
						success: (res) => {
							console.log("res:" + JSON.stringify(res, null, 2)); // 美化输出
							// 请求成功，检查是否有订单
							if (res.hasOrder) {
								// 如果有订单，允许开门
								this.toggleDoor(res.orders[0].venue_id);
							} else {
								// 如果没有订单，提示用户
								uni.showToast({
									title: '该门店未找到相关订单，无法开门',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							// 请求失败的回调
							console.error('检查订单失败:', err);
							uni.showToast({
								title: '检查订单失败，请重试',
								icon: 'none'
							});
						}
					});
				});
			},
			// 开门
			toggleDoor(doorId) {
				const newState = !this.isDoorOpen; // 切换状态
				this.$api.post({
					url: '/common/ctrlRoom',
					loadingTip: '加载中...',
					data: {
						room_id: doorId,
						switch: 'on' // 接口需要 'on' 或 'off'
					},
					success: res => {
						this.isDoorOpen = newState; // 根据操作成功后更新状态
						uni.showToast({
							title: '开门成功'
						});
					},
					fail: () => {
						uni.showToast({
							title: '操作失败',
							icon: 'none'
						});
					}
				});
			},
			openDoorRequest() {
				// 发送请求到后端开门
				this.$api.post({
					url: '/Door/open', // 替换为实际的开门接口
					data: {
						user_id: this.user.id, // 用户ID，根据实际需求传递
					},
					success: res => {
						// 后端响应成功
						uni.showToast({
							title: '开门成功',
							icon: 'success'
						});
					},
					fail: err => {
						// 请求失败
						uni.showToast({
							title: '开门失败，请重试',
							icon: 'none'
						});
					}
				});
			},
			goToShop() {
				// 跳转到 pages/joinUS/shop 页面
				uni.navigateTo({
					url: '/pages/joinUS/apply'
				});
			},
			// 打开地图并定位
			openLocation() {
				wx.openLocation({
					latitude: parseFloat(this.storeInfo.latitude), // 转换为数值类型的纬度
					longitude: parseFloat(this.storeInfo.longitude), // 转换为数值类型的经度
					name: this.storeInfo.name, // 地点名称
					address: this.storeInfo.address, // 地点详细地址
					scale: 18 // 地图缩放级别，范围 5 ~ 18
				});
			},
			// 拨打电话
			callPhone() {
				// 你可以根据需求替换成你自己的电话号码
				const phoneNumber = this.storeInfo.phone; // 请替换为实际电话号码
				uni.makePhoneCall({
					phoneNumber: phoneNumber, // 必须是有效的电话号码
					success: () => {
						console.log('拨号成功');
					},
					fail: () => {
						console.log('拨号失败');
					}
				});
			},
			// 复制微信号
			copyWeChatNumber() {
				const wechatNumber = this.storeInfo.weixin; // 替换为实际的微信号
				wx.setClipboardData({
					data: wechatNumber,
					success: function() {
						wx.showToast({
							title: '微信号已复制',
							icon: 'success',
							duration: 2000
						});
					},
					fail: function() {
						wx.showToast({
							title: '复制失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			// 新的检查登录状态的方法
			checkLoginStatus() {
				const user = uni.getStorageSync('xyvenue:user');
				if (user && user.id) {
					// 用户已登录，更新用户信息
					this.user.isLogin = true;
					// console.log(JSON.stringify(user, null, 2)); // 美化输出
					this.user.info = {
						avatar: user.avatar || '', // 确保有头像，否则使用空字符串
						nickname: user.nickname || '', // 确保有昵称，否则使用空字符串
					};
				} else {
					// 用户未登录
					this.user.isLogin = false;
				}
			},
			// 加载会员数据
			loadMembers() {
				this.$xyfun.storeId().then((store_id) => {
					this.$api.post({
						url: '/member/listsByScore',
						loadingTip: '加载中...',
						data: {
							store_id: store_id,
						},
						success: (res) => {
							uni.stopPullDownRefresh();
							this.isLoading = false;
							this.members = res.data;
							// 更新 rankingList
							this.rankingList = this.members.map((member, index) => ({
								rank: index + 1, // 排名
								name: member.nickname, // 姓名
								score: member.score, // 积分
								color: index < 3 ? this.getRankColor(index) :
								'', // 前三名设置颜色
							}));
						},
					});
				});
			},
			// 加载“全省”会员数据
			loadProvinceMembers() {
				this.$xyfun.storeId().then((store_id) => {
					this.$api.post({
						url: '/member/listsByProvince',
						loadingTip: '加载中...',
						data: {
							store_id: store_id,
						},
						success: (res) => {
							uni.stopPullDownRefresh();
							this.isLoading = false;
							// 更新 rankingList
							console.log("rres:" + res)
							this.rankingList = res.map((member, index) => ({
								rank: index + 1, // 排名
								name: member.nickname, // 姓名
								score: member.score, // 积分
								color: index < 3 ? this.getRankColor(index) :
								'', // 前三名设置颜色
							}));
						},
					});
				});
			},
			getRankColor(index) {
				const colors = [
					'color:#FF0000;font-weight:bold', // 第一名红色
					'color:#FF6600;font-weight:bold', // 第二名橙色
					'color:#FFAE00;font-weight:bold', // 第三名黄色
				];
				return colors[index] || '';
			},
			// 执行扫一扫
			scanCode() {
				wx.scanCode({
					success: (res) => {
						// 扫描成功的回调
						console.log('扫描成功:', res);
						const doorIdMatch = res.path.match(/scene=url%3D([A-Za-z0-9]+)/);
						if (doorIdMatch) {
							const doorId = doorIdMatch[1]; // 提取到的doorId
							this.checkVenueId(doorId);
							// console.log('doorId:', doorId);
						} else {
							// console.log('未找到有效的doorId');
							uni.showToast({
								title: '未找到有效的doorId',
								icon: 'none'
							});
						}
						// 获取扫描结果
						// const doorId = res.result.door_id || 'C0742BFDC724'; // 假设扫码得到的结果就是门禁标识符




					},
					fail: (err) => {
						// 扫描失败的回调
						console.error('扫描失败:', err);
						uni.showToast({
							title: '扫码失败，请重试',
							icon: 'none'
						});
					}
				});
			},
			// 通过房间门的设备码，拿到对应的房间id
			checkVenueId(doorId) {
				// 发起请求，检查用户是否有订单
				this.$api.post({
					url: '/member/checkVenue', // 假设的接口路径
					loadingTip: '检查房间中...',
					data: {
						door_device_id: doorId, // 门 ID
					},
					success: (res) => {
						// 请求成功，检查是否有订单
						// console.log("res.hacVenue:" + res);
						// console.log("res:" + JSON.stringify(res, null, 2)); // 美化输出
						if (res.hasVenue) {
							// console.log("hhasdfksa");
							// 如果有房间
							// this.toggleDoor(doorId);
							const venueId = res.venue.id;
							this.checkUserOrder(venueId);
						} else {
							// 如果没有订单，提示用户
							uni.showToast({
								title: '未找到相关房间，请重新扫码',
								icon: 'none'
							});
						}

					},
				});

			},

			// // 检查用户订单
			// checkUserOrder(venueId) {
			// 	this.$xyfun.storeId().then((store_id) => {
			// 		const user = uni.getStorageSync('xyvenue:user');
			// 		const userId = user.id;
			// 		// 发起请求，检查用户是否有订单
			// 		this.$api.post({
			// 			url: '/member/checkOrder', // 假设的接口路径
			// 			loadingTip: '检查订单中...',
			// 			data: {
			// 				store_id: store_id, // 商店 ID
			// 				venue_id: venueId, // 门禁标识符
			// 				user_id: userId // 用户id
			// 			},
			// 			success: (res) => {
			// 				console.log("res:" + JSON.stringify(res, null, 2)); // 美化输出
			// 				// 请求成功，检查是否有订单
			// 				if (res.hasOrder) {
			// 					// 如果有订单，允许开门
			// 					this.toggleDoor(venueId);
			// 				} else {
			// 					// 如果没有订单，提示用户
			// 					uni.showToast({
			// 						title: '未找到相关订单，无法开门',
			// 						icon: 'none'
			// 					});
			// 				}
			// 			},
			// 			fail: (err) => {
			// 				// 请求失败的回调
			// 				console.error('检查订单失败:', err);
			// 				uni.showToast({
			// 					title: '检查订单失败，请重试',
			// 					icon: 'none'
			// 				});
			// 			}
			// 		});
			// 	});
			// },

			// // 开门
			// toggleDoor(doorId) {
			// 	const newState = !this.isDoorOpen; // 切换状态
			// 	this.$api.post({
			// 		url: '/common/ctrlRoom',
			// 		loadingTip: '加载中...',
			// 		data: {
			// 			room_id: doorId,
			// 			switch: 'on' // 接口需要 'on' 或 'off'
			// 		},
			// 		success: res => {
			// 			this.isDoorOpen = newState; // 根据操作成功后更新状态
			// 			uni.showToast({
			// 				title: '开门成功'
			// 			});
			// 		},
			// 		fail: () => {
			// 			uni.showToast({
			// 				title: '操作失败',
			// 				icon: 'none'
			// 			});
			// 		}
			// 	});
			// },

			// 发送开门请求
			// openDoor(doorId) {
			// 	this.$xyfun.storeId().then((store_id) => {
			// 		// 发起开门请求
			// 		this.$api.get({
			// 			url: '/open/door', // 假设的开门接口路径
			// 			loadingTip: '正在开门...',
			// 			data: {
			// 				store_id: store_id, // 商店 ID
			// 				door_id: doorId, // 门禁标识符
			// 			},
			// 			success: (res) => {
			// 				// 开门成功的回调
			// 				if (res.success) {
			// 					uni.showToast({
			// 						title: '开门成功',
			// 						icon: 'none'
			// 					});
			// 				} else {
			// 					// 如果开门失败
			// 					uni.showToast({
			// 						title: '开门失败，请重试',
			// 						icon: 'none'
			// 					});
			// 				}
			// 			},
			// 			fail: (err) => {
			// 				// 开门请求失败的回调
			// 				console.error('开门请求失败:', err);
			// 				uni.showToast({
			// 					title: '开门请求失败，请重试',
			// 					icon: 'none'
			// 				});
			// 			}
			// 		});
			// 	});
			// },
			loadData() {
				this.$xyfun.storeId().then((store_id) => {
					this.$api.get({
						url: '/common/index',
						loadingTip: '加载中...',
						data: {
							store_id: store_id,
						},
						success: res => {
							uni.stopPullDownRefresh();
							this.$xyfun.setNavTitle(res.storeInfo.name)
							this.isLoading = false;
							this.storeInfo = res.storeInfo;
							this.storeInfo.distance = this.$xyfun.algorithm([res.storeInfo.latitude,
								res.storeInfo.longitude
							], [this.lat, this.lng]);
							this.rechargeList = res.rechargeList;
							this.noticeList = res.noticeList;
							this.venueId = res.storeInfo.venue[0].id;

						}
					});
				})
			},
			toLogin() {
				// 如果用户没有登录，跳转到登录页面
				if (!this.user.isLogin) {
					uni.navigateTo({
						url: '/pages/user/login'
					})
				} else {
					// 用户已登录时，可以执行其他操作，比如跳转到用户主页等
					// console.log('用户已经登录，无需跳转');
				}

			},
			start() {
				// 使用同步方法获取存储的用户信息
				const user = uni.getStorageSync('xyvenue:user');
				if (user && user.id) {
					// 用户已登录，检查是否有订单
					this.checkHasOrder();
					
				} else {
					// 用户未登录，提示用户登录
					uni.showToast({
						title: '请先登录，即将跳转登录页面',
						icon: 'none',
						duration: 2000 // 显示2秒
					});
					// 延迟跳转到登录页面
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/user/login"
						});
					}, 1000); // 延迟2秒
				}
			},
			checkHasOrder() {
				// 调用API接口检查是否有订单
				this.$xyfun.storeId().then((store_id) => {
					this.$api.post({
						url: '/common/checkOrder', // 后端接口
						loadingTip: '加载中...',
						data: {
							store_id: store_id,
						},
						success: res => {
							if (res && res.deviceCode) {
								// 如果返回了设备码，表示有有效订单,进入开始页面
									uni.navigateTo({
										url: "/pages/start/first"
									});
							} else {
								// 没有订单，提示用户并跳转到预约页面
								uni.showToast({
									title: '当前无订单，请先预约',
									icon: 'none'
								});
									// // 延迟返回上一页，避免与跳转产生冲突
									// setTimeout(() => {
									// 	this.$xyfun.back(); // 延迟后返回
									// }, 500); // 1.5秒后返回
							}
						},
			
					})
				})
			},
			getRankImage(index) {
				const rankImages = [
					'/static/rank_1.png', // 第一名图片
					'/static/rank_1.png', // 第二名图片
					'/static/rank_1.png', // 第三名图片
				];
				return rankImages[index];
			},
			navigateTo(page) {
				uni.navigateTo({
					url: `/pages/${page}/${page}`
				});
			},
			switchTab(tab) {
				this.currentTab = tab; // 更新当前激活的标签
				if (tab === '当前门店') {
					// 触发加载当前门店数据
					this.loadMembers();
				} else if (tab === '全省门店') {
					// 触发加载全省数据
					this.loadProvinceMembers();
				}
			},
			// 跳转到订单列表页
			navigateToOrderList() {
				wx.navigateTo({
					url: '/pages/user/order/list' // 跳转到指定的页面
				});
			},
			// 跳转到充值列表页
			navigateToRechargeList() {
				wx.navigateTo({
					url: '/pages/user/balance/recharge' // 跳转到指定的页面
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	/* 页面整体样式 */
	.container {
		display: flex;
		flex-direction: column;
		background-color: #f1f1f1;
		// height: 100vh;
	}

	/* 顶部背景与文字 */
	.header {
		position: relative;
		// height: 800rpx;
		// background-color: #000;
	}

	.background-image {
		width: 100%;
		height: 740rpx;
		object-fit: cover;
	}

	.spacing-container {
		height: 20px;
		background-color: #888;
	}

	.header-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		color: #fff;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.subtitle {
		font-size: 28rpx;
		color: #33ff33;
		margin: 10rpx 0;
	}

	.description {
		font-size: 24rpx;
		color: #fff;
	}

	.tennis-ball {
		position: absolute;
		width: 80rpx;
		height: 80rpx;
		bottom: 0;
		right: 50rpx;
	}

	/* 场馆信息 */
	.venue-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		margin: 10px;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	/* 修改 venue-left 靠右 */
	.venue-left {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.venue-row {
		display: flex;
		align-items: center;
	}

	.switch-wrapper {
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.label {
		font-size: 24rpx;
		color: #666;
	}

	.switch-text {
		font-size: 30rpx;
		color: #007aff;
	}

	.arrow-icon {
		width: 25rpx;
		height: 25rpx;
	}

	.venue-name {
		// font-size: 32rpx;
		font-weight: bold;
		color: #333;
		// margin-top: 50rpx;
		margin-right: 50rpx;
	}

	/* 中间分隔线 */
	.divider {
		width: 2rpx;
		height: 60rpx;
		background-color: #ddd;
		margin: 0 20rpx;
	}

	/* 右侧营业时间与图标 */
	.venue-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.business-hours {
		font-size: 24rpx;
		color: #333;
	}

	.contact-icons {
		display: flex;
		margin-top: 10rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin: 2px;
		}
	}

	.icon-button {
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.phone {
		background: url('/static/weixin.png') no-repeat center;
		background-size: contain;
	}

	.chat {
		background: url('/static/weixin.png') no-repeat center;
		background-size: contain;
	}

	.location {
		background: url('/static/weixin.png') no-repeat center;
		background-size: contain;
	}

	/* 功能按钮与大图 */
	.features {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		margin: 0 10px;
	}

	.feature-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.feature-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 5rpx;
	}

	.feature-text {
		font-size: 24rpx;
		color: #333;
		margin-bottom: 5rpx;
	}

	.feature-pinyin {
		font-size: 20rpx;
		color: #999;
	}

	.center-image {
		width: 200rpx;
		height: 200rpx;
		margin: 0 10rpx;
	}

	/* 其他功能按钮 */
	.other-features {
		display: flex;
		justify-content: space-around;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.register-section {
		display: flex;
		// flex-direction: column;
		/* 垂直排列 */
		align-items: center;
		/* 水平居中 */
		justify-content: space-between;
		/* 垂直居中 */
		height: 100%;
		/* 或设置为父容器的高度 */
		padding: 40rpx;
		background-color: #fff;
		margin: 10px;
		/* 可选背景色 */
		border-radius: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.left {
		display: flex;
	}

	.profile-image {
		width: 80rpx;
		height: 80rpx;
	}

	.register-info {
		display: flex;
		flex-direction: column;
		/* 设置垂直排列 */
		align-items: flex-start;
		/* 文字左对齐 */
		margin-left: 20rpx;
		/* 可根据需求设置左边距 */
	}

	.main-info {
		font-size: 28rpx;
		/* 主文字较大字体 */
		font-weight: bold;
		/* 加粗文字 */
		color: #000;
		/* 主文字颜色 */
		margin-bottom: 10rpx;
		/* 增加主文字与次文字的间距 */
	}

	.sub-info {
		font-size: 22rpx;
		/* 次文字较小字体 */
		color: #888;
		/* 次文字颜色 */
	}


	.register-button {
		width: 50rpx;
		/* 根据图片实际尺寸设置宽度 */
		height: 50rpx;
		/* 根据图片实际尺寸设置高度 */
		margin-left: 20rpx;
		/* 为按钮图片添加间距 */
		cursor: pointer;
		/* 鼠标悬停时显示为手型（仅H5） */
	}

	.tools-section {
		display: flex;
		justify-content: space-around;
		/* 分布放置两个工具 */
		/* 将子项平分宽度 */
		width: 100%;
	}

	/* 每个工具按钮 */
	.tools-section .tool-item {
		display: flex;
		align-items: center;
		background-color: #ffffff;
		padding: 40rpx;
		border-radius: 15rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		flex: 1;
		/* 让每个按钮占据相等的宽度 */
		margin: 0 15rpx;
		/* 给按钮之间添加间距 */
	}



	.tool-icon {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
		/* 图片和文字间的间距 */
	}

	.tool-text {
		display: flex;
		flex-direction: column;
		/* 文字上下排列 */
	}

	.tool-title {
		font-size: 28rpx;
		/* 标题文字大小 */
		font-weight: bold;
		/* 加粗 */
		color: #333;
	}

	.tool-subtitle {
		font-size: 22rpx;
		/* 副标题文字大小 */
		color: #888;
		margin-top: 5rpx;
		/* 标题与副标题的间距 */
	}


	.ranking-section {
		margin: 20rpx;
		background-color: #ffffff;
	}

	.ranking-header {
		display: flex;
		flex-direction: column;
		/* 让内容垂直排列 */
		padding: 20rpx;
		background-color: #ffffff;
		/* 可选背景色 */
	}

	.title-section {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		margin-bottom: 20rpx;
		/* 与 tab-switch 间距 */
	}

	.color-marker {
		width: 10rpx;
		/* 标记宽度 */
		height: 40rpx;
		/* 标记高度 */
		background-color: #00c853;
		/* 标记颜色 */
		border-radius: 5rpx;
		/* 圆角 */
		margin-right: 10rpx;
		/* 与标题文字间距 */
	}

	.title {
		font-size: 32rpx;
		/* 标题字体大小 */
		font-weight: bold;
		/* 标题加粗 */
		color: #333333;
	}

	.tab-switch {
		display: flex;
		justify-content: flex-start;
		/* 按钮靠左排列 */
		gap: 20rpx;
		/* 按钮之间的间距 */
		padding: 20rpx;
		/* 设置内边距 */
		width: 200px;
	}

	.tab-button {
		font-size: 28rpx;
		/* 按钮文字大小 */
		color: #666666;
		/* 默认字体颜色 */
		background: none;
		/* 去除背景 */
		border: none !important;
		/* 去除边框 */
		padding: 0 20rpx;
		/* 内边距控制按钮大小 */
		cursor: pointer;
	}

	.tab-button.active {
		font-weight: bold;
		/* 激活时加粗 */
		color: #333333;
		/* 激活时的文字颜色 */
		background-color: #e0e0e0;
		/* 激活时的背景色为灰色 */
		border-radius: 8rpx;
		/* 激活按钮的圆角效果 */
	}

	.ranking-list {
		display: flex;
		flex-direction: column;

		/* 列表垂直排列 */
		gap: 20rpx;
		/* 每个项目之间的间距 */
		padding: 20rpx;
	}

	.rank-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.rank-number {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		width: 100rpx;
		/* 固定宽度 */
	}

	.rank-icon {
		width: 40rpx;
		/* 排名图片宽度 */
		height: 40rpx;
		/* 排名图片高度 */
	}

	.player-info {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		gap: 10rpx;
		/* 图片与文字间的间距 */
		flex: 1;
		/* 占据剩余宽度 */
	}

	.player-icon {
		width: 40rpx;
		/* 玩家头像宽度 */
		height: 40rpx;
		/* 玩家头像高度 */
	}

	.player-name {
		font-size: 28rpx;
		/* 玩家姓名字体大小 */
		font-weight: bold;
		color: #333;
	}

	.player-score-section {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 内容靠左对齐 */
		gap: 10rpx;
		/* 图片和文字间距 */
	}

	.score-icon {
		width: 40rpx;
		/* 图标宽度 */
		height: 40rpx;
		/* 图标高度 */
		margin-right: 10rpx;
		/* 图标与文字的额外右边距 */
		flex-shrink: 0;
		/* 防止图标缩小 */
	}

	.player-score {
		font-size: 28rpx;
		/* 分数字体大小 */
		color: #666666;
		white-space: nowrap;
		/* 防止分数换行 */
		flex-shrink: 0;
		/* 防止分数文字缩小 */
		width: 25px;
	}
</style>